<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
		<style type="text/css">
			.list-code{
				width: 50rem;
				list-style: none;
			}
			.list-code li{
				width: 12rem;
				height: 1.875rem;
				background-color: skyblue;
				margin-right: 0.125rem;
				text-align: center;
				line-height: 1.875rem;
				float: left;
			}
			.list-code li:hover{
				background-color: red;
				cursor: pointer;
				color: snow;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<form action="" style="text-align: center;">
				
				<input v-model="code" id='code' type="text" placeholder="请输入xx" v-on:keyup.enter='tijiao' />
				<!-- 解决按回车时导致表单提交 -->
				<input type="text" style="display: none;">
				<label>合集: {{num}}个</label>
				<ul class="list-code">
					<li v-for="(c,index) in codeArray" @click="del(index)">{{c}}</li>
				</ul>
				<input type="button" value="保存">
			</form>
		</div>
		
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					code:'',
					codeArray:[],
					num:0
				},
				methods:{
					tijiao: function(){
						this.codeArray.push(this.code);
						this.code="";
						this.num=this.num+1;
					},
					del:function(i){
						if (i > -1) {
						    this.codeArray.splice(index, 1);
							this.num=this.num-1;
						}						
					}
				}
			});
		</script>
	</body>
</html>
